<template>
    <view class="m-button-popup" :class="classes" @click="onClick">
        <slot>
            <text v-if="text" :style="customStyle">{{ text }}</text>
        </slot>
        <uni-icons v-if="icon" :type="icon" :color="color" :size="iconSize" />
    </view>
</template>

<script lang="ts">
/**
 * @property {String} text 标签内容
 * @property {String} size = [default|small|mini] 大小尺寸
 * 	@value default 正常
 * 	@value small 小尺寸
 * 	@value mini 迷你尺寸
 * @property {String} type = [default|primary|success｜warning｜error]  颜色类型
 * 	@value default 灰色
 * 	@value primary 蓝色
 * 	@value success 绿色
 * 	@value warning 黄色
 * 	@value error 红色
 * @property {Boolean} disabled = [true|false] 是否为禁用状态
 * @property {Boolean} inverted = [true|false] 是否无需背景颜色（空心标签）
 * @property {Boolean} circle = [true|false] 是否为圆角
 * @event {Function} click 点击 Tag 触发事件
 */

export default {
    name: 'UniTag',
    emits: ['click'],
    props: {
        type: {
            // 标签类型default、primary、success、warning、error、royal
            type: String,
            default: 'default'
        },
        size: {
            // 字体大小 normal, large,middle
            type: String,
            default: 'normal'
        },
        // 标签内容
        text: {
            type: String,
            default: ''
        },
        disabled: {
            // 是否为禁用状态
            type: [Boolean, String],
            default: false
        },
        inverted: {
            // 是否为空心
            type: [Boolean, String],
            default: false
        },
        circle: {
            // 是否为圆角样式
            type: [Boolean, String],
            default: true
        },
        mark: {
            // 是否为标记样式
            type: [Boolean, String],
            default: false
        },
        customStyle: {
            type: String,
            default: ''
        },
        color: {
            type: String,
            default: '#000'
        },
        paddingSize: {
            // 大小 normal, large,middle
            type: String,
            default: 'normal'
        },
        icon: {
            type: String
        }
    },
    computed: {
        classes() {
            const { type, disabled, inverted, circle, mark, size, isTrue, paddingSize } = this
            const classArr = [
                'm-button-popup--' + type,
                'm-button-popup--' + size,
                'm-button-popup--padding-' + paddingSize,
                isTrue(disabled) ? 'm-button-popup--disabled' : '',
                isTrue(inverted) ? 'm-button-popup--' + type + '--inverted' : '',
                isTrue(circle) ? 'm-button-popup--circle' : '',
                isTrue(mark) ? 'm-button-popup--mark' : '',
                isTrue(inverted) ? 'm-button-popup--inverted' : ''
            ]
            // 返回类的字符串，兼容字节小程序
            return classArr.join(' ')
        },
        iconSize() {
            if (this.size == 'large') {
                return '32rpx'
            } else if (this.size == 'middle') {
                return '28rpx'
            }
            return '24rpx'
        }
    },
    methods: {
        isTrue(value: string | boolean) {
            return value === true || value === 'true'
        },
        onClick() {
            if (this.isTrue(this.disabled)) return
            this.$emit('click')
        }
    }
}
</script>

<style lang="scss" scoped>
$uni-primary: #2979ff !default;
$uni-success: #18bc37 !default;
$uni-warning: #f3a73f !default;
$uni-error: #e43d33 !default;

$tag-large-pd: 16rpx 30rpx;
$tag-middle-pd: 4rpx 10rpx;
$tag-mini-pd: 2rpx 6rpx;

.m-button-popup {
    display: inline-block;
    line-height: 28rpx;
    font-size: 24rpx;
    font-weight: 200;
    padding: $tag-mini-pd;
    color: v-bind(color);
    border-radius: 6rpx;
    background-color: $uni-bg-color-grey;
    border-width: 1rpx;
    border-style: solid;
    border-color: $uni-bg-color-grey;
    margin: $uni-spacing-row-sm;
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */

    // size attr
    &--default {
        font-size: 24rpx;
    }

    &--default--inverted {
        color: v-bind(color);
        border-color: v-bind(color);
    }

    &--large {
        font-size: 32rpx;
    }

    &--middle {
        font-size: 28rpx;
    }

    &--padding-large {
        padding: $tag-large-pd;
    }

    &--padding-middle {
        padding: $tag-middle-pd;
    }

    // type attr
    &--primary {
        background-color: $uni-primary;
        border-color: $uni-primary;
    }

    &--success {
        background-color: $uni-success;
        border-color: $uni-success;
    }

    &--warning {
        background-color: $uni-warning;
        border-color: $uni-warning;
    }

    &--error {
        background-color: $uni-error;
        border-color: $uni-error;
    }

    &--primary--inverted {
        color: $uni-primary;
        border-color: v-bind(color);
    }

    &--success--inverted {
        color: $uni-success;
        border-color: v-bind(color);
    }

    &--warning--inverted {
        color: $uni-warning;
        border-color: v-bind(color);
    }

    &--error--inverted {
        color: $uni-error;
        border-color: v-bind(color);
    }

    &--inverted {
        background-color: #fff;
    }

    // other attr
    &--circle {
        border-radius: 30rpx !important;
    }

    &--mark {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: 30rpx !important;
        border-bottom-right-radius: 30rpx !important;
    }

    &--disabled {
        opacity: 0.5;
        /* #ifdef H5 */
        cursor: not-allowed;
        /* #endif */
    }
}
</style>
